<template>
  <div class="ex-message">
    <div class="title"></div>
    <div class="steps">
    </div>
    <div class="infoMsg">
      <div class="steps">
        <span style="background-color: #09f; color: white;">签订协议</span>
        <span style="background-color: #09f; color: white;">填写资料</span>
        <span>审核</span>
      </div>


      <div class="form" :model="obj">
        <div class="img">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9000/core/teacher/upload"
              :headers="token"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" v-model="obj.avator" :src="imageUrl" class="avatar" width="100%" height="100%"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="form-group" prop="name">
          <div class="lable">姓名:</div>
          <div class="form-err">
            <input type="text" placeholder="请输入昵称" v-model="obj.name" @blur="lostNameBlur"></input>
            <div class="err" v-show="errTip1">{{ errTip1 }}</div>
          </div>
        </div>
        <div class="form-group" prop="email">
          <div class="lable">邮箱:</div>
          <div class="form-err">
            <input type="text" placeholder="请输入邮箱" v-model="obj.email" @blur="lostEmailBlur"></input>
            <div class="err" v-show="errTip2">{{ errTip2 }}</div>
          </div>
        </div>
        <div class="form-group" style="outline: none">
          <div class="lable">简介:</div>
          <textarea class="introduce" v-model="obj.intro"></textarea>
        </div>
        <hr>
        <div class="form-group" prop="phone">
          <div class="lable">手机号:</div>
          <div class="form-err">
            <input type="text" placeholder="请输入注册手机号" v-model="obj.phone" @blur="lostPhoneBlur"> </input>
            <div class="err" v-show="errTip3">{{ errTip3 }}</div>
          </div>
        </div>

                <div class="form-group">
                    <div class="lable">验证码:</div>
                    <div class="form-err">
                        <input type="text" placeholder="请输入手机验证码" v-model="obj.code" @blur="lostCodeBlur"></input>
                        <button type="button" class="btn_round" @click="getCode" :disabled="isSend">{{ context }}
                        </button>
                        <div class="err" v-show="errTip4">{{ errTip4 }}</div>
                    </div>
                </div>

                <!--        <div class="form-group">-->
                <!--          <div class="lable">密码:</div>-->
                <!--          <div class="form-err">-->
                <!--            <input type="text" placeholder="请输入登录密码" v-model="obj.password" @blur="lostPwdBlur"> </input>-->
                <!--            <div class="err" v-show="errTip5">{{ errTip5 }}</div>-->
                <!--          </div>-->
                <!--        </div>-->
                <div class="next">
                    <el-button class="next-btn" @click="toMsg" style="background-color: lightblue">提交审核</el-button>
                    <br>
                    <el-button class="next-btn" @click="exit">退出申请</el-button>
                </div>
            </div>

    </div>
  </div>

</template>

<script>
export default {
  name: "re-apply",
  data() {
    return {
      radio: '1',
      nextBtn: false,
      errTip1: '',
      errTip2: '',
      errTip3: '',
      errTip4: '',
      errTip5: '',
      obj: {
        avator: '',
        name: '',
        email: '',
        intro: '',
        phone: '',
        code: '',
        password: '',
      },
      message: '',


      /*获取验证码*/
      isSend: false,
      context: '获取短信验证码', // 发送验证码按钮的初始显示文字
      totalTime: 60,

                /*图片上传*/
                // 上传的图片
                imageUrl: '',
                // 默认的图片
                /*baseImg: '',*/
                token: {token: sessionStorage.getItem("token")},
            };
        },
        methods: {
            exit() {
                this.$router.push('/')
                window.location.reload();
            },
            lostNameBlur() {
                if (!this.obj.name) {
                    this.errTip1 = '请输入昵称';
                } else {
                    this.errTip1 = ''
                }
            },
            lostEmailBlur() {
                if (!this.obj.email) {
                    this.errTip2 = '请输入您的邮箱';
                } else if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{3,6}$/).test(this.obj.email)) {
                    this.errTip2 = '请输入正确的邮箱';
                } else {
                    this.errTip2 = '';
                }
            },
            lostPhoneBlur() {
                if (!this.obj.phone) {
                    this.errTip3 = '请输入手机号码'
                } else if (!(/^1(3\d|4[5-8]|5[0-35-9]|6[567]|7[01345-8]|8\d|9[025-9])\d{8}$/.test(this.obj.phone))) {
                    this.errTip3 = '手机号码格式不正确';
                    return
                } else {
                    this.errTip3 = ''
                }
                this.selApply(this.obj.phone);
            },
            lostCodeBlur() {
                if (!this.obj.code) {
                    this.errTip4 = '请输入手机验证码';
                    return
                } else {
                    this.errTip4 = ''
                }
            },
            // lostPwdBlur() {
            //   if (!this.obj.password) {
            //     this.errTip5 = '请输入密码';
            //   } else {
            //     this.errTip5 = ''
            //   }
            // },
            toMsg() {
                var _this = this;
                if (this.obj.name) {
                    if (this.obj.email) {
                        if (this.obj.phone) {
                            if (this.obj.code === this.message) {
                                this.initTeacher();
                                this.$router.push('/apply/re-examine');

                            } else {
                                this.errTip4 = '验证码错误'
                            }
                        } else {
                            this.errTip3 = '请输入手机号码'
                        }
                    } else {
                        this.errTip2 = '请输入邮箱'
                    }
                } else {
                    this.errTip1 = '请输入用户名'
                }

    },
    initTeacher() {
      let that = this;
      this.$http.post(`/core/teacher/insertTeacher`, this.obj).then(function (resp) {
        if (resp.data.code === 200) {
          that.$message.success(resp.data.context);
        }
      });

    },

    getCode() {
      let vm = this
      if (!vm.obj.phone) {
        vm.errTip3 = '请输入手机号码'
        return
      }

      this.$http.post(`/core/teacher/selectPhone/${vm.obj.phone}`).then(function (noPhone) {
        if (noPhone.data.code === 200) {
          vm.isSend = true;
          vm.context = vm.totalTime + "s后重新发送";
          let clock = window.setInterval(() => {
            vm.totalTime--;
            vm.context = vm.totalTime + "s后重新发送";
            if (vm.totalTime < 0) {
              window.clearInterval(clock);
              vm.context = "重新发送";
              vm.totalTime = 60;
              vm.isSend = false;
            }
          }, 1000);
          vm.$http.get(`/core/teacher/getMessage/${vm.obj.phone}`).then(function (success) {
            vm.message = success.data.result;
            console.log(vm.message);
          })
        } else {
          vm.errTip3 = '手机号码已经被注册'

        }
      })
    },

    //上传图片成功
    //图片上传成功后执行
    handleAvatarSuccess(res, file) {
      console.log(res)
      this.obj.avatar = res
      //回显路径
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
  },


  export:
      function uploadImg(params) {
        return axios.post('', params, {
          headers: {'Content-Type': 'multipart/form-data'}
        })
      },


}
</script>

<style>
body {
  width: 900px;
  margin: 0 auto 30px;
  background-color: #F7F7F7;
}

.title {
  height: 80px;
  line-height: 80px;
  background-color: #e4e4e4;
  border-radius: 8px 8px 0 0;
}

.ex-message {
  height: 1200px;
  background-color: white;
  padding-bottom: 30px;
}

.steps {
  background-color: white;
  width: 820px;
  padding: 0 15px;
  margin: 0 auto;
}

.steps span {
  display: inline-block;
  width: 270px;
  line-height: 30px;
  color: #999;
  font-size: 13px;
  margin: 30px 1px;
  background-color: #f2f2f2;
  text-align: center;
}

.infoMsg {
  width: 900px;
}

.lable {
  text-align: right;
  float: left;
  display: block;
  width: 110px;
  line-height: 36px;
  color: #333333;

}

.form-group {
  margin-left: 12px;
  float: left;
  width: 876px;
  position: relative;
  margin-bottom: 20px;
}

/* .avatar-uploader .el-upload {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
 }*/
input {
  width: 310px;
  height: 46px;
  border: 1px solid #CCC;
  padding: 0 0 0 10px;
  border-radius: 6px;
  font-size: 14px;
  margin: -5px 0 0 12px;
}

p {
  width: 100px;
  height: 20px;
  float: left;
  margin: 5px 0;

}

.introduce {
  width: 650px;
  height: 200px;
  float: left;
  border: 1px solid #CCC;
  border-radius: 6px;
  margin: 0 0 0 12px;
  padding: 10px 20px;
  text-align: left;
}

hr {
  line-height: 1;
  width: 900px;
  display: block;
  position: static;
  float: left;
  border: 2px solid #F7F7F7;
  margin: 12px 0 30px;

}

.btn_round {
  width: 100px;
  height: 47px;
  position: absolute;
  margin-left: 10px;
  padding: 0;

  top: -5px;
  line-height: 46px;
  background-color: #d51423;
  border-radius: 6px;

  text-align: center;
  color: #fff;
  border: none;
}

.next {
}

.next-btn {
  display: inline-block;
  width: 320px;
  line-height: 46px;
  background-color: #d51423;
  color: white;
  border-radius: 6px;
  position: relative;

  margin-top: 30px;
  padding: 0;
  border: none;
}

.err {
  color: red;
  padding-top: 5px;
  margin-left: 12px;
  padding-left: 10px;
  text-align: left;

}

.form-err {
  float: left;

}

.avatar-uploader .el-upload {
  border: 3px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  width: 200px;
  height: 200px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


</style>